<template>
	<view>
		<view class="baseForm">
			<!-- 搜索&扫码 -->
			<view class="upload-scan">
				<u-search
					v-model="searchText"
					shape="round"
					bgColor="#fff"
					:show-action="true"
					actionText="搜索"
					placeholder="请输入设备编号或名称"
					:animation="true"
					class="search"
					@search="searchList"
					@clear="searchList"
					@custom="searchList"></u-search>
				<!-- <mumu-get-qrcode @success='qrcodeSucess' @error="qrcodeError" ></mumu-get-qrcode> -->
				<u-icon
					name="scan"
					size="27px"
					:bold="false"
					@click="openScan"></u-icon>
			</view>
			<!-- tab-bar切换 -->
			<!-- 		<view class="tab-bar">
				<u-tabs
					:current="activeTab"
					:list="tabList"
					:scrollable="false"
					:activeStyle="{
						color: '#007aff',
						fontWeight: 'bold',
					}"
					lineWidth="34px"
					lineHeight="2px"
					lineColor="#007aff"
					@change="changeTab"></u-tabs>
			</view> -->
			<view>
				<u-list
					ref="tableScroll"
					@scrolltolower="scrolltolower"
					class="list"
					v-if="total"
					:height="listHeight"
					lowerThreshold="50px"
					:pagingEnabled="true">
					<!-- 	<u-list-item
						v-for="(item, index) in tableList"
						:key="item.id">
						<view class="card">
							<view class="right">
								<view class="title">
									<view class="label">耗材编号：</view>
									<view class="content">
										{{ item.consumeCode || "暂无信息" }}
									</view>
								</view>
								<view class="title">
									<view class="label">设备编号：</view>
									<view class="content">
										{{ item.equipCode || "暂无信息" }}
									</view>
								</view>
								<view class="title">
									<view class="label">产品：</view>
									<view class="content">
										{{ item.materialCode || "暂无信息" }}
									</view>
								</view>
								<view class="title">
									<view class="label">位置：</view>
									<view class="content">
										{{ item.equipPosition || "暂无信息" }}
									</view>
								</view>
								<view class="title">
									<view class="label">操作时间：</view>
									<view class="content">
										{{ item.equipPosition || "暂无信息" }}
									</view>
								</view>
							</view>
							<view class="left">
								<button
									v-show="item?.isSelect"
									class="uni-btn"
									size="mini"
									type="primary">
									已选择
								</button>
								<button
									v-show="!item?.isSelect"
									class="uni-btn"
									size="mini"
									plain
									type="primary"
									@click="selectWorkOrder(item, index)">
									选 择
								</button>
							</view>
						</view>
					</u-list-item> -->
					<u-list-item
						v-for="(item, index) in tableList"
						:key="item.id"
						@click="selectWorkOrder(item)">
						<view class="card">
							<view class="flex record-title">
								<text class="line1">耗材编号</text>
								<text>
									{{ item.consumeCode }}
								</text>
							</view>
							<view class="flex record-title">
								<text class="line1">设备编号</text>
								<text>
									{{ item.equipCode }}
								</text>
							</view>

							<view
								class="flex flex-col justify-between flex-1 h-full record-content-body">
								<view class="record-content">
									<view class="record-item">
										<text>产品</text>
										<text>{{ item.materialCode }}</text>
									</view>
									<view class="record-item">
										<text>位置</text>
										<text class="">
											{{ item.equipPosition }}
										</text>
									</view>
									<view class="record-item">
										<text>操作时间</text>
										<text class="">
											{{ item.equipPosition }}
										</text>
									</view>
								</view>
							</view>
						</view>
					</u-list-item>
				</u-list>
			</view>
		</view>
		<view v-show="tableList.length === 0 && !tableLoading">
			<u-empty
				mode="list"
				icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		</view>
		<u-modal
			:show="showImport"
			ref="uModal"
			:content="`当前设备编号为${
				selectOrder?.equipCode ?? ''
			}, 请确认是否选择？`"
			confirmText="确认"
			showCancelButton
			@cancel="cancelImport"
			@confirm="confirmImport"></u-modal>
	</view>
</template>

<script setup lang="ts">
import { computed, ref, watch, reactive } from "vue";
import {
	onPageScroll,
	onPullDownRefresh,
	onShow,
	onBackPress,
} from "@dcloudio/uni-app";
import ScanBar from "@/components/scan-bar/index.vue";
import { onLoad } from "@dcloudio/uni-app";
import { http } from "@/utils/http";
import { PageResult } from "@/types/type";
import { useUserStore } from "../../../../stores/useUserStore";
// 待完成数据
const tableList = ref([]);
const tableLoading = ref(false);
const current = ref(0);
const totalPage = ref(0);
const total = ref(0);
//列表高度
const listHeight = ref("");
onLoad(() => {
	// #ifdef H5
	listHeight.value = "calc(100vh - 88px - 44px)";
	// #endif

	// #ifdef APP-PLUS
	listHeight.value = "calc(100vh - 48px - 44px)";
	// #endif
	loadmore();
});
const props = defineProps({
	id: {
		type: String,
	},
});
if (props.id) {
	searchList();
}

onPullDownRefresh(() => {
	searchList();
});

async function loadmore(type?: string) {
	try {
		current.value += 1;
		tableLoading.value = true;
		const result: PageResult<any> = await http({
			method: "POST",
			url: `/eam/csmmaterialdata/getByPage`,
			data: {
				current: current.value,
				size: 20,
				data: {
					searchData: searchText.value,
				},
			},
		}).finally(() => {
			tableLoading.value = false;
		});
		const list = result.data;
		console.log("list", list);

		for (let i = 0; i < list.length; i++) {
			tableList.value.push(list[i]);
		}
		totalPage.value = result.page;
		total.value = result.total;
		type === "refresh" && uni.stopPullDownRefresh();
	} catch (e) {
		console.log(e);
	}
}
const scrolltolower = () => {
	totalPage.value > current.value && loadmore();
};

// 选择订单
const selectOrder = ref({});
const selectIndex = ref();
const showImport = ref(false);
function selectWorkOrder(row, index) {
	selectOrder.value = row;
	selectIndex.value = index;
	uni.navigateTo({
		url: `/pages/eam/consumables/abnormalDisassembly/abnormalDisassemblySettings?result=${JSON.stringify(
			selectOrder.value
		)}`,
		animationDuration: 0,
	});
}
// 取消加工单
function cancelImport() {
	showImport.value = false;
	selectOrder.value = {};
	selectIndex.value = null;
}
// 确认选择加工单
async function confirmImport() {
	showImport.value = false;
	uni.showToast({
		title: "选择成功",
	});
	console.log(selectOrder.value);
	uni.navigateTo({
		url: `/pages/eam/consumables/abnormalDisassembly/abnormalDisassemblySettings?result=${JSON.stringify(
			selectOrder.value
		)}`,
		animationDuration: 0,
	});
}

// H5端扫码调用
const showMumuQrcode = ref(false);
// 点击扫码
const searchText = ref("");
function openScan() {
	/* #ifdef H5 */
	uni.showToast({
		icon: "none",
		title: "请到安卓设备进行扫码",
	});
	showMumuQrcode.value = true;
	/* #endif */
	// 只允许通过相机扫码
	uni.scanCode({
		scanType: ["barCode", "qrCode"],
		onlyFromCamera: true,
		success: function (res) {
			searchText.value = JSON.stringify(res.result);
			searchList();
			console.log("条码类型：" + res.scanType);
			console.log("条码内容：" + res.result);
		},
	});
}

// 列表搜索
function searchList() {
	current.value = 0;
	tableList.value = [];

	loadmore("refresh");
}

// 切换页
// const activeTab = ref(0);
// const tabList = [{ name: "未判定" }, { name: "已判定" }];
// function changeTab(val: TabInfo) {
// 	activeTab.value = val.index;
// 	searchList();
// }

onBackPress(() => {
	back1();
	return true;
});
const back1 = () => {
	uni.switchTab({
		url: "/pages/index/index",
	});
};
</script>

<style lang="scss" scoped>
.upload-scan {
	padding: 10px 40rpx;
}

.baseForm {
	background-color: #fbfbff;
	.upload-scan {
		padding: $uni-page-padding;
		padding-top: 5px;
		padding-bottom: 5px;
		display: flex;
		align-items: center;
		// box-shadow: 0 1px 10px 0px rgb(19 10 236 / 10%);
		.u-icon {
			margin-left: 8px;
		}
	}
	.u-line {
		padding: 10px 0;
	}
	.form {
		padding: $uni-page-padding;
	}

	.u-form-item {
		min-height: 46px;
	}

	:deep(.uicon-arrow-right) {
		top: 1px;
		margin-left: 3px;
	}

	.submit_btn {
		margin: 60rpx;
		border-radius: 60rpx;
	}

	:deep(.u-form-item__body__right__content__slot) {
		flex-direction: row-reverse;
	}

	:deep(.u-textarea__field) {
		text-align: right;
	}

	.u-textarea {
		border: 1px solid $uni-input-border-color;
		border-radius: 8px;
	}
}

.list {
	.card {
		margin: $uni-page-padding;
		margin-top: 5px;
		margin-bottom: 4px;
		border-radius: 7px;
		padding: 11px 10px 0px 10px;
		transition: all 300ms ease;
		// border: 1px solid #efefef;
		background-color: #fff;
		box-shadow: 0 1px 5px rgb(19 11 236 / 13%);
		.card-flex {
			display: flex;
			align-items: flex-start;
		}
		.right {
			flex: 1;
		}
		.title {
			font-size: 14px;
			line-height: 40px;
			height: 40px;
			margin-top: 8px;
			font-weight: bold;
			color: #101010;
			border-top: 1px solid #e5ebff;
		}
		.uni-btn {
			float: right;
			font-size: 12px;
			height: 24px;
			line-height: 24px;
			padding: 0 15px;
			margin-top: 7px;
			font-weight: 400;
		}
		.des {
			font-size: 12px;
			line-height: 20px;
			margin-bottom: 3px;
		}
		.left {
			flex-basis: calc(50% + 10px);
		}
	}
}

// .u-list-item {
// 	margin: $uni-page-padding;
// 	margin-top: 5px;
// 	margin-bottom: 5px;
// 	border-radius: 7px;
// 	display: flex;
// 	align-items: center;

// 	transition: all 300ms ease;
// 	box-shadow: 0 1px 5px rgba(19, 11, 236, 0.13);
// 	background-color: #fff;
// 	display: flex;
// 	align-items: flex-start;

// 	.title {
// 		display: flex;

// 		.label {
// 			font-size: 14px;
// 			font-weight: 600;
// 			color: #101010;
// 		}

// 		.content {
// 			font-size: 14px;
// 		}
// 	}
// }

.searchScan {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 36px;
	width: 95%;
	padding: 6px;

	.addBtn1 {
		width: 60px;
		height: 36px;

		:deep(.u-button__text) {
			font-size: 14px !important;
		}
	}
}
.handle-ok {
	min-width: 75px;
	color: #19be6b;
}
.card {
	background-color: #fff;
	margin: 10px 10px;
	border-radius: 8px;
	padding: 8px 12px;
	transition: all 300ms ease;
	box-shadow: 0 2px 6px rgba(3, 121, 255, 0.05);
}

.overhidden {
	overflow: hidden;
}

.uni-table-th {
	font-size: 14px;
	font-weight: 400;
	color: #16254e;
}

uni-page-body {
	min-height: 100vh;
	height: 100%;
	background-color: #fbfbff;
}

.u-divider {
	margin: 10px 0;
}

.baseForm {
	background-color: #fbfbff;
	display: block;
	min-height: 100vh;
}

.title {
	font-size: 16px;
	margin: 6px 0 14px;
	font-weight: bold;
	.u-icon {
		margin-right: 3px;
	}
}

.submit_btn {
	margin: 0px 20rpx 20rpx 10rpx;
}
.grey_btn {
	margin: 0px 10rpx 20rpx 20rpx;
	height: 45px;
	line-height: 45px;
}
.submit_btn_div {
	position: fixed;
	display: flex;
	align-items: center;
	width: 100%;
	bottom: 0;
	z-index: 10;
	uni-button {
		flex: 1;
		border-radius: 10px;
	}
}

:deep(.u-form-item__body) {
	padding: 4px 0 12px;
}
:deep(.u-form-item) {
	.u-form-item__body__left__content__label {
		color: #a8b2bb;
		font-size: 14px;
		margin-bottom: 1px;
	}
	.u-form-item__body__left__content__required {
		font-size: 16px;
	}
	// 单选不可编辑样式
	.u-radio {
		.u-radio__icon-wrap--disabled {
			background-color: rgb(255, 255, 255) !important;
		}
		.u-radio__icon-wrap--disabled--checked {
			background-color: rgb(41, 121, 255) !important;
			border-color: rgb(41, 121, 255) !important;
			.u-icon__icon {
				color: #fff !important;
			}
		}
		.u-radio__text {
			color: #16254e !important;
			font-size: 14px !important;
		}
	}

	.u-textarea--disabled {
		background-color: #fff !important;
	}
	.uni-textarea-textarea {
		color: #16254e !important;
	}

	.input-box {
		width: 100%;
		border: 0.5px solid #dadbde !important;
		border-radius: 4px;
		.u-input {
			pointer-events: none;
			height: 34px;
			padding-left: 10px !important;
		}
		image {
			padding: 7px 6px;
			width: 20px;
			height: 20px;
		}
	}
}

.mt-10- {
	margin-top: -30px;
}

.unitable {
	width: calc(100% - 20px);
	margin: 0 10px 70px;
	box-shadow: 0 1px 8px 0px rgb(19 10 236 / 8%);
	border-radius: 4px;
}
.record-title {
	display: flex;
	justify-content: space-between;
	margin: 2px 0 2px 0;
	color: $primary-color;
	uni-text:nth-child(1) {
		font-weight: bold;
		font-size: 15px;
	}
	uni-text:nth-child(2) {
		font-weight: bold;
		font-size: 15px;
		min-width: 60px;
		text-align: right;
	}
}
.record-item {
	margin: 6px 0 !important;
	color: #8f8e94 !important;
}
</style>
